<template>
    <div class="play-container" id="player-container"></div>
</template>

<script setup lang="ts">
const props = defineProps({
    container_id: {
        type: String,
        default: '',
    },
    width: {
        type: String,
        default: '100%',
    },
    height: {
        type: String,
        default: '100%',
    },
});

/**
 * 初始播放器容器
 * */
const initContainer = () => {
  new window.Jessibuca({
    container: '#player-container'
  })
};

defineExpose({
    initContainer,
});
</script>

<style scoped lang="scss">
.play-container {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    margin: 0 auto;
    position: relative;
    padding-top: 0;
    backdrop-filter: blur(0px);
    border: 2px var(--border-color) solid;
    border-radius: 5px;
}
</style>
